<!-- /**
* Display a list of forms that users can fill out.
*
* @author Xiong Keqin
* @since 2023-10-25
*/ -->
<template>
    <div>

    <div class="app-container" v-if="showList">
        
        <center>
			<h1>就业失业人数统计表单</h1>
		</center>

        <el-table v-loading="listLoading" :data="indexedViewData" element-loading-text="Loading" border fit
            highlight-current-row :row-class-name="tableRowClassName">

            <!-- 序号列 -->
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ calculateIndex(scope.$index) }}
                </template>
            </el-table-column>

            <!-- 其他列 -->
            <el-table-column label="调查期名称" align="center" width="160">
                <template slot-scope="scope">
                    {{ scope.row.InvestigationTitle }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="调查期开始时间" width="140">
                <template slot-scope="scope">
                    {{ scope.row.formStartDate }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="调查期结束时间" width="140">
                <template slot-scope="scope">
                    {{ scope.row.formEndDate }}
                </template>
            </el-table-column>
            
            <el-table-column label="描述" width="430" align="center">
                <template slot-scope="scope">
                    {{ scope.row.investigationDescription }}
                </template>
            </el-table-column>
            <el-table-column label="提交截止时间" width="160" align="center">
                <template slot-scope="scope">
                    {{ scope.row.formSubmitDate}}
                </template>
            </el-table-column>
            

            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button @click="jump2Form(scope.row)" ttype="primary" plain :disabled="scope.row.formID != canFilling">填写
                    </el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
            :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalItems">
        </el-pagination>
    </div>
    

    <!-- <enterprise-data-filling-form v-show="showForm" :formID="selectFormID"  @reload-page="reloadPage" > -->
    <enterprise-data-filling-form v-if="showForm" :formID="selectFormID"  @update-parameter="goBackShowList" >
    </enterprise-data-filling-form>
    </div>
</template>

<script>
import { getEnterpriseInfo} from '@/api/enterprise/enterpriseRecord'
import { getAllFillingDataInfo} from '@/api/enterprise/dataFilling'
import enterpriseDataFillingForm from './enterpriseDataFillingForm.vue';
import store from '@/store'

export default {
    components: {
        'enterprise-data-filling-form': enterpriseDataFillingForm
    },

    computed: {
        indexedViewData() {
            return this.viewData.map((item, index) => {
                return { ...item, index: index + 1 };
            });
        },

        canFilling() {
            const allDates = this.list;
            // 找到第一个 formExamineStatus 不为 6 的项
            const firstItem = allDates.find(item => (item.formExamineStatus != 6) && (item.formExamineStatus != 7));

            if (firstItem) {
                if((firstItem.formExamineStatus==0)||(firstItem.formExamineStatus==1)||(firstItem.formExamineStatus==3)||(firstItem.formExamineStatus==5))
                return firstItem.formID;
            }
            return -1;
        },
    },

    data() {
        return {
            userId: store.getters.userId, // 当前企业的账号ID
            list: [],
            showData: [],
            viewData: [],
            listLoading: true,
           
            page: {
                currentPage: 1,
                pageSize: 10,
                totalItems: 0,
            },
            startIndex: 0,

            form_id : [],
            
            showList: true,
            showForm: false,
            selectFormID: Number,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getEnterpriseInfo({"userId": this.userId}).then(response => {
				// 如果未完成备案，跳转回 企业备案提交 页面
				if(response.data.companyRecordStatus != 4){
                    this.$message('请完成企业备案!')
					this.$router.push('/enterprise/enterpriseRecord/enterpriseRecordSubmit');
				}
				
            })
            this.listLoading = true
            getAllFillingDataInfo({"userId": this.userId}).then(response => {
                console.log(response)
                // this.list = response.data.sort((a, b) => (a.formEndDate - b.formEndDate))
                this.list = response.data.sort((a, b) => {
                    // 将日期字符串转换为时间戳进行比较
                    const dateA = new Date(a.formEndDate).getTime();
                    const dateB = new Date(b.formEndDate).getTime();

                    // 降序排列
                    return dateA - dateB;
                });
                // this.list = response.data
                // this.form_id = response.data.formID
                this.showData = this.list
                // this.cities = Array.from(new Set(this.list.map(item => item.userCity)))
                this.display()
                this.listLoading = false // 加载完列表就可以认为加载完成
            })
            
        },

        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'odd-row';
            } else return 'even-row';
        },

        changePageSize(val) {
            this.page.pageSize = val;
            this.display();
        },

        changeCurrentPage(val) {
            this.page.currentPage = val;
            this.startIndex = (val - 1) * this.page.pageSize;
            this.display();
        },

        calculateIndex(index) {
            return this.startIndex + index + 1;
        },


        filterUser() {
            let filteredData = this.list;

            filteredData = filteredData.filter(item => (item.formExamineStatus == 0) || (item.formExamineStatus == 1) || (item.formExamineStatus == 3) || (item.formExamineStatus == 5));
            this.showData = filteredData;
            this.page.totalItems = filteredData.length;
        },

        display() {
            // console.log(this.list)
            this.filterUser()
            this.viewData = this.showData.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize))
            // console.log(this.viewData)
        },

        reloadPage() {
            location.reload(); // 刷新当前页面
        },

        
        jump2Form(one_form) {
            this.showForm = true;
            this.showList = false;
            this.selectFormID = one_form.formID;
        },

        goBackShowList(newValue) {
            this.fetchData();
            this.showForm = newValue.sForm;
            this.showList = newValue.sList;
        }

        
    },
}

</script>

<style scoped>
.el-table .odd-row {
    background: white;
}

.el-table .even-row {
    background: gainsboro;
}
</style>